<template>
    <!-- 头部搜索框 -->
    <ContentWrap style="border-radius: 20px;">
        <div class="luosi">供应商管理</div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="formInline.user" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="formInline.user" placeholder="请输入联系人" clearable />
            </el-form-item>
            <el-form-item label="联系人电话">
                <el-input v-model="formInline.user" placeholder="请输入联系人电话" clearable />
            </el-form-item>
            <el-form-item label="供应商状态">
                <el-select v-model="formInline.region" placeholder="请选择" clearable>
                    <el-option label="停用" value="停用" />
                    <el-option label="启用" value="启用" />
                </el-select>
            </el-form-item>
            <el-form-item label="入住时间">
                <el-date-picker v-model="formInline.date" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="所属行业">
                <el-select v-model="formInline.region" placeholder="请选择" clearable>
                    <el-option v-for="(v, i) in list" :label="v.title" :value="v.title" :key="i" />

                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap style="border-radius: 20px;">
        <div class="yq">
            <el-button type="primary" plain @click="dialogFormVisible = true" style="margin: 10px 10px 10px 0px;">
                <Icon icon="ep:plus" class="mr-5px" /> 邀请
            </el-button>
        </div>
        <div class="el-body">
            <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;">
                <el-table-column prop="timer" label="入驻时间" align="center" />
                <el-table-column prop="name" label="供应商名称" align="center" />
                <el-table-column prop="industry" label="行业" align="center" />
                <el-table-column prop="contacts" label="联系人" align="center" />
                <el-table-column prop="phone" label="联系方式" align="center" />
                <el-table-column prop="state" label="状态" align="center" />
                <el-table-column align="center">
                    <template #default>
                        <!-- 点击打开合同详情页 -->
                        <el-button link type="primary">
                            合同历史
                        </el-button>
                        <el-button link type="warning">
                            编辑
                        </el-button>
                    </template>
                </el-table-column>
                <div style="display: flex; justify-content: center;">
                    <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :disabled="disabled" background
                        layout=" prev, pager, next" :total="1000" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
            </el-table>
            <!-- 分页器 -->
        </div>
    </ContentWrap>


    <!-- 弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="邀请供应商" style="width: 500px; border-radius: 18px;">
        <div style="font-size: 17px; font-weight: 600;margin-bottom: 10px;">基本信息</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon style=" background-color: #f9fbff; padding: 5px 0px;  border-radius: 15px;">
            <el-form-item label="联系人姓名" prop="name" style="width: 420px; margin-top: 18px;">
                <el-input v-model="ruleForm.name" placeholder="请输入联系人姓名" />
            </el-form-item>
            <el-form-item label="手机号码" prop="tel" style="width: 420px;">
                <el-input v-model="ruleForm.tel"
                    οninput="value=value.replace(/[^\d]/g,'');if(value.length > 11)value = value.slice(0, 11)"
                    placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="供应商名称" prop="resource" style="width: 420px;">
                <el-input v-model="ruleForm.resource" placeholder="请输入供应商名称" />
            </el-form-item>
            <el-form-item label="行业" prop="region" style="width: 420px;">
                <el-select v-model="ruleForm.region" placeholder="请选择行业" style="width: 420px;">
                    <el-option v-for="(v, i) in hange" :label="v.title" :value="v.title" :key="i" />
                </el-select>
            </el-form-item>
        </el-form>


        <!-- 第二层 -->
        <div style="font-size: 17px; font-weight: 600;margin: 32px 0px 10px 0px;">设置密码</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon style="background-color: #f9fbff; border-radius: 15px; padding: 12px 0px;">
            <el-form-item label="用户名" prop="count" style="width: 420px; margin-top: 18px;">
                <el-input v-model="ruleForm.name" placeholder="请设置用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password" style="width: 420px;">
                <div style="display: flex;">
                    <el-input v-model="ruleForm.tel" placeholder="请设置初始密码" style="margin-right:20px ;" />
                    <el-button style="display: inline-block" type="primary" plain>随机生成</el-button>
                </div>
            </el-form-item>
            <el-form-item label="您的密码" prop="yopasswor" style="width: 420px; margin-bottom: 18px;">
                <el-input v-model="ruleForm.resource" placeholder="请输入您的登陆密码" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button style="border-radius: 12px;" @click="dialogFormVisible = false">取消</el-button>
                <el-button style="border-radius: 12px;" type="primary" @click="dialogFormVisible = false">
                    生成邀请链接
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'


import { ref } from 'vue'

import type { FormInstance } from 'element-plus'

interface RuleForm {
    name: string
    tel: string
    region: string  //行业
    count: string
    date1: string
    date2: string
    delivery: boolean
    type: string[]
    yopasswor: string
    password: string //初始密码
    resource: string //供应商
    desc: string
}

// 行业
const hange = reactive([
    { title: '沙石' },
    { title: '石油' }
])
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    tel: '',
    region: '',
    password: '',
    yopasswor: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',  //供应商
    desc: '',
})

const currentPage = ref(5)
const pageSize = ref(100)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const tableData = [{}]
// 所属行业的
const list = reactive([
    { title: '石油' },
    { title: '沙石' }
])

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const onSubmit = () => {
    console.log('submit!')
}



const dialogFormVisible = ref(false)

var checkName = (rule, value, cb) => {
    //验证名字的正则表达式
    console.log(rule)
    const regName = /^([\\u4e00-\\u9fa5]{1,20}|[a-zA-Z\\.\\s]{1,20})$/;
    if (regName.test(value)) {
        //正确的名字
        return cb();
    }
    cb(new Error("请输入正确的名字"));
};
const rules = reactive({
    name: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' },
        {
            validator: checkName,
            min: 2,
            max: 5,
            message: "请输入正确的名字",
            trigger: "blur",
        },
    ],
    tel: [
        { required: true, message: "手机号不能为空", trigger: "blur" },
        { min: 11, message: "手机号格式不正确", trigger: "blur" }
    ],
    region: [
        { required: true, message: '请选择一个行业', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入您的密码', trigger: 'blur' }
    ],
    yopasswor: [{ required: true, message: '请输入', trigger: 'blur' }],
    count: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
        },
    ],
    resource: [
        {
            required: true,
            message: '请输入供应商名字',
            trigger: 'blur',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

</script>

<style scoped lang="scss">
.luosi {
    font-size: 22px;
    margin-bottom: 23px;
}

.yq {
    display: flex;
    flex-direction: row-reverse;

}

::v-deep.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev {
    border-radius: 12px;
}

.el-body {
    background-color: #f9fbff;
    border-radius: 16px;
    padding-bottom: 10px;
}

::v-deep.el-pagination.is-background .btn-prev,
::v-deep.el-pagination>.is-last {
    border-radius: 10px;
}
</style>